<template>
  <div style="width:100%;height:240px;" id="regionalFireSituBar"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var regionalFireChart = echarts.init(
        document.getElementById("regionalFireSituBar")
      );
      var xAxisData = [

      ];
      var lastMonth = [];
      var thisMonth = [];
      for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        xAxisData.push(dataItem.name);
        lastMonth.push(dataItem.lastMonth);
        thisMonth.push(dataItem.nowMonth);
      }

      let option = {
        color: ["#1898f6", "#bc81f9"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["上月", "本月"],
          orient: "vertical",
          x: "right"
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: xAxisData
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "上月",
            type: "bar",
            data: lastMonth,
            barGap: 0.1
          },
          {
            name: "本月",
            type: "bar",
            data: thisMonth,
            barGap: 0.1
          }
        ]
      };

      regionalFireChart.setOption(option);
      regionalFireChart.resize();
      window.addEventListener("resize", function() {
        regionalFireChart.resize();
      });
    }
  }
};
</script>
